<template>
  <div class="previewer" :style="previewerStyle">
    <!-- 背景层 -->
    <div class="preview-bg p-a fulled-h fulled-w" :style="backgroundStyle" style="z-index: -1"></div>
    <div
      v-for="(item, i) in componentData"
      :key="item.id"
      :style="
        getStyle(item.style, [
          'position',
          'width',
          'top',
          'left',
          'paddingTop',
          'paddingBottom',
          'paddingLeft',
          'paddingRight',
          'zIndex'
        ])
      "
    >
      <component
        :is="item.component"
        :id="item.id"
        :key="item.id"
        :widget="item"
        :index="i"
        class="fulled-w"
        :style="
          getStyle(item.style, [
            'color',
            'fontSize',
            'fontWeight',
            'textDecoration',
            'textAlign',
            'opacity',
            item.flexible ? '' : 'height'
          ])
        "
      />
    </div>
  </div>
</template>

<script>
  import { getStyle, encodePageStyle } from '@/utils';
  import Group from './landingPageEditor/Group/Layout';
  import { Basic, H5 } from './landingPageWidget/index';
  export default {
    components: { Group, ...Basic.layouts, ...H5.layouts },
    props: {
      pageSize: { type: Object, default: () => ({}) },
      pageStyle: { type: Object, default: () => ({}) },
      componentData: { type: Array, default: () => [] }
    },
    computed: {
      previewerStyle() {
        return {
          width: `${this.pageSize.width}px`,
          height: `${this.pageSize.height}px`
        };
      },
      backgroundStyle() {
        const pageStyle = this.pageStyle;
        const backgroundStyle = encodePageStyle(pageStyle);
        if (pageStyle.fillType === 2 && backgroundStyle.backgroundImage)
          backgroundStyle.backgroundImage = `url(${this.$staticRes(backgroundStyle.backgroundImage)})`;
        return backgroundStyle;
      }
    },

    methods: { getStyle }
  };
</script>

<style lang="scss" scoped>
  .previewer {
    position: relative;
    min-height: 200px;
  }
</style>
